<template>
  <el-dialog width="60%"
             :visible.sync="operationShow"
             id="detail"
             :before-close="handleClose"
             :close-on-click-modal="false"
             :center="true"
             :title="title"
             append-to-body>
    <el-form
        :model="detailForm"
        :rules="detailFormRules"
        label-width="140px"
        ref="detailForm"
        v-if="showType==='add' || showType ==='editor'"
    >
      <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item prop="companyName" label="名称">
             <el-input v-model.trim="detailForm.companyName"
                       size="small"
                       clearable
                       placeholder="请输入名称"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item prop="code" label="编码">
              <el-input v-model.trim="detailForm.code"
                        size="small"
                        clearable
                        placeholder="请输入编码"></el-input>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item  prop="taxPlace" label="产业">
            <el-select v-model="detailForm.taxPlace"
                       class="a_w"
                       size="small"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in taxPlaceArr"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="地区"
                          prop="company">
              <el-autocomplete
                  size="small"
                  clearable
                  v-model.trim="detailForm.company"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入名称"
                  @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row  :gutter="24" v-if="showType==='excel'">
      <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="fileList"
          >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success"  disabled>下载</el-button>
        <div slot="tip" class="el-upload__tip">只能上传.xlsx文件，且不超过5M</div>
      </el-upload>
    </el-row>
    <div slot="footer"  class="dialog-foote f-tac f-pdg-15-t">
      <el-button
                 type="primary"
                 class="f-push-15-r"
                 @click="save">确定</el-button>
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
name: "operation",
  props:{
    detailForm:{
      type:Object,
      default:()=>{}
    },
    detailFormRules:{
      type:Object,
      default:()=>{}
    },
    industryTypeArr:{
      type:Array,
      default:()=>[]
    },
    taxPlaceArr:{
      type:Array,
      default:()=>[]
    },
    title:{
      type:String,
      default:''
    }
  },
  data() {
    return {
       operationShow:false,
       showType: '',
       fileList:[]
    }
  },
  methods:{
    // 弹框关闭
    handleClose() {
      if(this.showType ==='add' || this.showType ==='editor') {
        this.$refs['detailForm'].resetFields();
      }else if(this.showType ==='excel') {

      }
      this.operationShow = false;
      this.showType = ''
    },
    // 获取列表
    async querySearchAsync(queryString,cb) {
      const {data,flag} = await this.$api.companyList({
        taxPlace:this.detailForm.taxPlace,
        name: queryString
      })
      .catch((err)=>{
            cb([{value:'暂无数据',code:null}])
      })
      if(!flag) {
        cb([{value:'暂无数据',code:null}])
        return
      }
      const result = data.map((item)=>{
        return {
          value:item.companyName,
          code:item.id
        }
      })
      result.length? cb(result):cb([{value:'暂无数据', code:null}])
    },
    // 筛选条件
    handleSelect(item) {
      if(!item.code) {
        this.searchForm.company = ''
        return
      }
    },
    // 点击确定
    save() {
      if(this.showType ==='add' || this.showType==='editor') {
        this.$refs['detailForm'].validate((valid) => {
          if (valid) {
            this.$emit('surePublic', this.detailForm)
            this.handleClose();
          }
        });
      }else if(this.showType ==='excel') {
         this.handleClose();

      }
    },
    // 显示弹框
    handleShow(type) {
       this.operationShow = true;
       this.showType = type
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const Xls = file.name.split('.');
      console.log(file)
      const isLt5M = file.size / 1024 / 1024 < 5;
      if(Xls[1] === 'xls'||Xls[1] === 'xlsx'||Xls[1] === 'csv'){
        if(!isLt5M) {
          this.$message.error('上传文件不得超过5M!')
          return  false
        }
        return file
      }else {
        this.$message.error('请上传excel格式的文件!')
        return false
      }
    },
    handleSuccess(file) {
      console.log(file)
    }
  },
}
</script>

<style scoped>

</style>
